<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>daily study | daily study</title>
    <meta name="description" content="无 FUCK 说">
    <link rel="preload stylesheet" href="/assets/style.1ac9090e.css" as="style">
    <link rel="modulepreload" href="/assets/app.db63b7d7.js">
    <link rel="modulepreload" href="/assets/engineering_webpack 动态引入的坑.md.9d587510.lean.js">
    
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-c3073c68><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-c3073c68 data-v-0fa0e57d><div class="VPNavBar has-sidebar" data-v-0fa0e57d data-v-be450ad9><div class="container" data-v-be450ad9><div class="title" data-v-be450ad9><div class="VPNavBarTitle has-sidebar" data-v-be450ad9 data-v-6d2fb2d9><a class="title" href="/" data-v-6d2fb2d9><!--[--><!--]--><!--[--><img class="VPImage logo" src="/coll.png" alt data-v-6db2186b><!--]--><!--[--> <!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-be450ad9><div class="curtain" data-v-be450ad9></div><div class="content-body" data-v-be450ad9><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-be450ad9 data-v-bdedfc22><span id="main-nav-aria-label" class="visually-hidden" data-v-bdedfc22>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->HOME<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/article/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->随笔<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/engineering/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/interview/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->前端笔面试题<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/javascript/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->JS<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->Vue<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/node/" data-v-bdedfc22 data-v-f2ec7ecf data-v-a8b5c975><!--[-->Node<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-be450ad9 data-v-da3f667a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-da3f667a data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-be450ad9 data-v-2ab2a029 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/hmfy" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-be450ad9 data-v-66bb1f24 data-v-96001b6b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-96001b6b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-96001b6b><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-96001b6b><div class="VPMenu" data-v-96001b6b data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-66bb1f24><div class="item appearance" data-v-66bb1f24><p class="label" data-v-66bb1f24>Appearance</p><div class="appearance-action" data-v-66bb1f24><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-66bb1f24 data-v-0d529b6d data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-0d529b6d><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-0d529b6d><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-66bb1f24><div class="item social-links" data-v-66bb1f24><div class="VPSocialLinks social-links-list" data-v-66bb1f24 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/hmfy" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-be450ad9 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-c3073c68 data-v-2817d72e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-2817d72e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-2817d72e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-2817d72e>Menu</span></button><a class="top-link" href="#" data-v-2817d72e>Return to top</a></div><aside class="VPSidebar" data-v-c3073c68 data-v-c79ccefa><div class="curtain" data-v-c79ccefa></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-c79ccefa><span class="visually-hidden" id="sidebar-aria-label" data-v-c79ccefa> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-c79ccefa><section class="VPSidebarItem level-0 has-active" data-v-c79ccefa data-v-983f6b21><!----><div class="items" data-v-983f6b21><!--[--><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="/engineering/index.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>简介</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="/engineering/rollup%E5%BC%80%E5%8F%91ESModule.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>rollup开发ESModule</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="/engineering/webpack%20%E5%8A%A8%E6%80%81%E5%BC%95%E5%85%A5%E7%9A%84%E5%9D%91.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>webpack 动态引入的坑</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="/engineering/webpack3%E5%8D%87%E7%BA%A74.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>webpack3升级4</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-983f6b21 data-v-983f6b21><div class="item" data-v-983f6b21><div class="indicator" data-v-983f6b21></div><a class="VPLink link link" href="/engineering/webpack%E7%9A%84cacheGroups.html" data-v-983f6b21 data-v-a8b5c975><!--[--><p class="text" data-v-983f6b21>webpack的cacheGroups</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-c3073c68 data-v-4e6b5525><div class="VPDoc has-sidebar has-aside" data-v-4e6b5525 data-v-ae7d01fc><div class="container" data-v-ae7d01fc><div class="aside" data-v-ae7d01fc><div class="aside-curtain" data-v-ae7d01fc></div><div class="aside-container" data-v-ae7d01fc><div class="aside-content" data-v-ae7d01fc><div class="VPDocAside" data-v-ae7d01fc data-v-cdc66372><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-cdc66372 data-v-4414ac5c><div class="content" data-v-4414ac5c><div class="outline-marker" data-v-4414ac5c></div><div class="outline-title" data-v-4414ac5c>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-4414ac5c><span class="visually-hidden" id="doc-outline-aria-label" data-v-4414ac5c> Table of Contents for current page </span><ul class="root" data-v-4414ac5c data-v-1188541a><!--[--><li data-v-1188541a><a class="outline-link" href="#webpack-动态引入" data-v-1188541a>webpack 动态引入</a><!----></li><li data-v-1188541a><a class="outline-link" href="#webpack-动态引入实现原理" data-v-1188541a>webpack 动态引入实现原理</a><!----></li><li data-v-1188541a><a class="outline-link" href="#publicpath" data-v-1188541a>publicPath</a><!----></li><li data-v-1188541a><a class="outline-link" href="#动态引入跨工程出错原因" data-v-1188541a>动态引入跨工程出错原因</a><!----></li><li data-v-1188541a><a class="outline-link" href="#解决方案" data-v-1188541a>解决方案</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cdc66372></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ae7d01fc><div class="content-container" data-v-ae7d01fc><!--[--><!--]--><main class="main" data-v-ae7d01fc><div style="position:relative;" class="vp-doc _engineering_webpack%20%E5%8A%A8%E6%80%81%E5%BC%95%E5%85%A5%E7%9A%84%E5%9D%91" data-v-ae7d01fc><div><h2 id="webpack-动态引入" tabindex="-1">webpack 动态引入 <a class="header-anchor" href="#webpack-动态引入" aria-hidden="true">#</a></h2><p>最近在写一个公用库时，遇到一个需求：</p><p>在某个初始化函数内需要根据传参来确实初始化哪一种图表，而两种界面用到的第三方库不同</p><p>如果将两个库都引入，然后根据条件判断去执行对应库里的函数，就会造成明明只想要 A 图表，却将 B 图表需要的第三方库也打包进去</p><p>并且由于是条件判断，因此无法做树摇（<code>webpack</code> 只分析代码，不执行代码），无论如何分包，两个库都会被打包进去</p><p>于是想到，通过动态引入另外两种工具库：</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;">exports.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">echarts</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">echarts</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">import</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">echarts</span><span style="color:#89DDFF;">&#39;</span><span style="color:#676E95;font-style:italic;">/* webpackChunkName: &quot;echarts&quot; */</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">import</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@antv/g2</span><span style="color:#89DDFF;">&#39;</span><span style="color:#676E95;font-style:italic;">/* webpackChunkName: &quot;ant&quot; */</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>代码写完以后打包，发布到 <code>npm</code>，紧接着在工程内引入使用:</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">init</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">tools</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><p>结果发现报错了，<code>echarts.js</code> 引入失败： <img src="/assets/img.fb379869.png" alt="img.png"></p><p>然后一看链接路径，<code>js</code> 文件夹下确实没有这个文件</p><p>因为在打包我自己的 <code>tools</code> 时，<code>webpack</code> 将 <code>echarts</code> 单独分出来了</p><p>但是在工程中动态使用，请求的路径不对，所以导致 <code>404</code></p><h2 id="webpack-动态引入实现原理" tabindex="-1">webpack 动态引入实现原理 <a class="header-anchor" href="#webpack-动态引入实现原理" aria-hidden="true">#</a></h2><p>那么我们看一下 <code>webpack</code> 是如何得到这个路径的（部分代码已省略，仅展示与获取路径相关代码）：</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight" tabindex="0"><code><span class="line"><span style="color:#676E95;font-style:italic;">/* 重点在于得出 __webpack_require__.p */</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* webpack/runtime/publicPath */</span></span>
<span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">scripts</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementsByTagName</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">script</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#676E95;font-style:italic;">/*  从后往前，获取一个 src   */</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">scripts</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">scripts</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">while</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#F07178;">) </span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">scripts</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">--</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">throw</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Error</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Automatic publicPath is not supported in this browser</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">#.</span><span style="color:#89DDFF;">*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\?</span><span style="color:#C3E88D;">.</span><span style="color:#89DDFF;">*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\/</span><span style="color:#89DDFF;">[^</span><span style="color:#A6ACCD;">\/</span><span style="color:#89DDFF;">]+</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#676E95;font-style:italic;">/* 通过正则，剔除哈希，剔除问号参数拼接，剔除文件名，最终得到前缀路径，并赋值给 __webpack_require__.p */</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">scriptUrl</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 重点在于定义 __webpack_require__.l 这个函数</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 该函数传入完整的 url、chunkId 以及其它参数</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 被 __webpack_require__.f.j 函数调用</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* */</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* webpack/runtime/load script */</span></span>
<span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">l</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">done</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">key</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">chunkId</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">script</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">onerror</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onScriptComplete</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">null,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">onerror</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">onload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onScriptComplete</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">bind</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">null,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">onload</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">head</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">script</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/*</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 重点在于 __webpack_require__.f.j 这个函数</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 将第一步中得到的 __webpack_require__.p 和 chunk 组合得到完整的 url</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* 然后调用 __webpack_require__.l 函数加载动态引入的库</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">* */</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">/* webpack/runtime/jsonp chunk loading */</span></span>
<span class="line"><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">f</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">j</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">chunkId</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">promises</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 组装 URL</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">url</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">u</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">chunkId</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">Error</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">loadingEnded</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">o</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">installedChunks</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">chunkId</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// ...省略部分代码</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// 之前的报错就是在这里抛出的</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">errorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">load</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">missing</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#C792EA;">var</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">realSrc</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">src</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">message</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Loading chunk </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">chunkId</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;"> failed.</span><span style="color:#A6ACCD;">\n</span><span style="color:#C3E88D;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">errorType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">: </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">realSrc</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">)</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ChunkLoadError</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">type</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">errorType</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">error</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">request</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">realSrc</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">installedChunkData</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">](</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">__webpack_require__</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">l</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">url</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">loadingEnded</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">chunk-</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">chunkId</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">chunkId</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>可以看出，动态加载大致的步骤：</p><ul><li>通过 <code>chunkId</code> 得到单独分包的那个库的文件名</li><li>通过最后一个有效的 <code>script</code> 上的 <code>src</code> 属性和正则获取前缀路径</li><li>将前缀路径和要加载的文件名拼接，调用相关函数加载脚本</li></ul><p>而 <code>404</code> 的原因就是出在获取 <code>__webpack_require__.p</code> 这个过程</p><p>由于默认它是去读取当前项目其它 <code>js</code> 的请求路径，然后作为 <code>echarts.js</code> 的前缀路径</p><p>而其它 <code>js</code> 一般是我们当前项目里打包出来的 <code>js</code>，一般都在一个统一的文件夹下</p><p>而这个文件夹下肯定不可能有 <code>echarts.js</code>，因为它在 <code>tools</code> 打包过程已经处理了，不会在项目中再打包一次</p><p>那么如何解决这个问题呢？最简单的方法就是直接把 <code>echarts.js</code> 放到正确的文件夹下</p><p>但是这样每次项目上打包后都要手动重新放一次，万一哪次忘记了就 gg</p><p>既然这样，那就在项目自己的 <code>webpack</code> 配置里加上 <code>CopyPlugin</code> 不就可以了</p><p>但是有一个问题，就是以后每个使用 <code>tools</code> 的项目加上这个配置</p><p>作为一个工具库，肯定是希望在保持代码结构整洁的前提下，使用的门槛越低越好，因此这样也不合适</p><p>想到是 <code>__webpack_require__.p</code> 获取的不对而出的问题，那是不是要想办法让它能获取到对的值呢</p><h2 id="publicpath" tabindex="-1">publicPath <a class="header-anchor" href="#publicpath" aria-hidden="true">#</a></h2><p>查看官网发现，<code>__webpack_require__.p</code> 之所以会通过上述的逻辑获取</p><p>是因为 <code>publicPath</code> 这个属性在 <code>targets</code> 为 <code>web</code> 时的默认值是 <code>auto</code><img src="/assets/img_1.2a32cab7.png" alt="img_1.png"></p><p>而我们在没有设置 <code>browserslist</code> 的情况下，<code>target</code> 的默认值刚好为 <code>web</code>： <img src="/assets/img_2.c7b5f60e.png" alt="img_2.png"></p><p>所以如果我们设置正确的 <code>publicPath</code>，是不是就有可能让 <code>__webpack_require__.p</code> 是对的，从而拼接出对的路径</p><blockquote><p>设置 <code>publicPath</code> 的方式有两种：</p><ul><li><p>一种是 <code>output</code> 内打包时就配置好</p></li><li><p>另一种是通过 <code>window.__webpack_public_path__ = &#39;xxx&#39;</code> 来配置，这种可以达到动态配置的效果</p></li></ul></blockquote><p>因此尝试修改 <code>publicPath</code> 再打包试试</p><p>但是又有问题了，什么才是正确的路径呢，因为 <code>tools</code> 在打包后不清楚会被谁使用，因此正确的路径我们无法判断</p><p>因此在不对项目做任何入侵的情况下想要让这个路径正确，靠修改 <code>publicPath</code> 好像是不行</p><p>那如果在项目中使用 <code>tools</code> 时，将正确的 <code>publicPath</code> 传参过去可不可以呢</p><h2 id="动态引入跨工程出错原因" tabindex="-1">动态引入跨工程出错原因 <a class="header-anchor" href="#动态引入跨工程出错原因" aria-hidden="true">#</a></h2><p>项目中使用 <code>tools</code> 库的时候，<code>echarts.js</code> 是在 <code>node_modules</code> 中的 <code>tools</code> 文件夹内的</p><p>而在使用 <code>tools</code> 这个库的时候，由于是已经被打包的代码，因此已经完成依赖收集过程</p><p>因此在项目上使用 <code>tools</code> 时，不会再对该库里面的内容走依赖收集流程</p><p>因此项目在打包过程中不会处理 <code>echart.js</code> 这一文件</p><p>这也就意味着：</p><ul><li>在开发环境时，<code>webpack-dev-server</code> 不会将 <code>echarts.js</code> 打包进内存，因此通过 <code>dev-server</code> 开启的服务器永远无法访问到这一文件</li></ul><blockquote><p><code>webpack-dev-server</code> 主要由 <code>express</code> 、<code>webpack-dev-middleware</code> 等组成</p><p>其中 <a href="https://webpack.docschina.org/guides/development/#using-webpack-dev-middleware" target="_blank" rel="noreferrer"><code>webpack-dev-middleware</code></a> 以 <code>watch</code> 模式启动 <code>webpack</code> 并将每次打包后的内容缓存在内存中提供给服务器，为服务器提供静态资源</p><p>而如果某一个文件没有进行依赖收集，就不会打包进内存，就无法通过 <code>webpack-dev-server</code> 启动的服务器访问</p><p><code>webpack</code> 本身就支持 <code>watch</code> 模式，为何还要用另外一个插件提供静态资源给服务器呢？</p><p>因为 <code>webpack</code> 本身的 <code>watch</code> 模式每次都会生成实体文件，而 <code>webpack-dev-middleware</code> 不会生成文件，只会将其缓存在内存中（使用 <code>nodeJS</code> 的 <code>memory-fs</code> 模块）</p></blockquote><ul><li>在生产环境时，<code>echarts.js</code> 这个文件不会被单独打包进我们项目的 <code>dist</code> 目录</li></ul><p>因此可以知道，就算在使用 <code>tools</code> 时给他传参，进而修改 <code>publicPath</code>，也没有办法在项目里自动引入对应 <code>js</code></p><p>那这种动态导入就没法使用了么，很显然不是</p><p>假如我们把 <code>tools</code> 库里的代码移到我们项目里然后去执行的话，可以发现是能分别正常引入两个 <code>js</code> 的：</p><blockquote><p>首先，由于动态引入的这部分代码是由项目本身打包的，因此会进行依赖收集，并将 <code>echarts.js</code> 分包进项目的 <code>output</code> 目录</p><p>因此无论是打包后还是开发模式下，都是可以读到这个文件的，而如果不做特殊处理，<code>echarts.js</code> 必定是和项目里打包的其它 <code>js</code> 放在一起，因此拼接的路径刚好是对的</p><p>其次就算路径不对，我们也可以通过 <code>publicPath</code> 及时修正</p></blockquote><h2 id="解决方案" tabindex="-1">解决方案 <a class="header-anchor" href="#解决方案" aria-hidden="true">#</a></h2><p>因此我们可以假设，如果能让 <code>import(&#39;echarts&#39;)</code> 和 <code>import(&#39;@antv/g2&#39;)</code> 这部分代码原封不动放到项目里，让动态引入的库交给项目自己的打包工具处理，应该就没问题了</p><p>而想要让上述动态引入的语法不被打包，这里有两种方案：</p><ul><li>第一种方案：依然使用 <code>webpack</code></li></ul><blockquote><p>将动态引入相关的代码单独提取到一个文件内，例如叫 <code>active-code.js</code></p><p>然后在配置中增加 <code>noParse</code>，值填写 <code>active-code</code>，那么在打包 <code>tools</code> 库时，这个文件就会被略过而不被打包</p><p>但是需要注意，在库中引入自己本地的 <code>js</code> 时，不能写相对路径，而应该带上库名</p><p>例如 <code>import(&#39;tools/lib/local.js&#39;)</code>，因为引入的代码是未打包过直接交给项目处理的</p><p>同时，应该通过 <code>CopyPlugin</code> 将对应文件放入最终包的对应目录，例如 dist/lib/ 内</p><p>另外我们在开发这个库过程中，如果用了本地的 <code>js</code>，由于直接写包名（<code>tools/lib/local.js</code>）</p><p>因此肯定会 <code>import</code> 不到这个包，这时需要用 <a href="https://webpack.js.org/plugins/normal-module-replacement-plugin/" target="_blank" rel="noreferrer">NormalModuleReplacementPlugin</a> 重定向资源</p></blockquote><ul><li>第二种方案：更换打包工具，使用 <code>rollup</code></li></ul><blockquote><p>由于 <code>rollup</code> 默认构建目标就是 <code>ES6</code>，因此只需要很少的配置就可完成打包，并保留 <code>import</code> 语法</p></blockquote><p>个人是推荐使用第二种方案，<code>rollup</code> 使用见<a href="/engineering/rollup开发ESModule.html">rollup开发ESModule</a></p></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-ae7d01fc data-v-2813752b><!----><div class="prev-next" data-v-2813752b><div class="pager" data-v-2813752b><a class="pager-link prev" href="/engineering/rollup%E5%BC%80%E5%8F%91ESModule.html" data-v-2813752b><span class="desc" data-v-2813752b>Previous page</span><span class="title" data-v-2813752b>rollup开发ESModule</span></a></div><div class="has-prev pager" data-v-2813752b><a class="pager-link next" href="/engineering/webpack3%E5%8D%87%E7%BA%A74.html" data-v-2813752b><span class="desc" data-v-2813752b>Next page</span><span class="title" data-v-2813752b>webpack3升级4</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"article_index.md\":\"857a285c\",\"article_js 修改 css 变量.md\":\"f79a90a6\",\"alg_index.md\":\"e3a92443\",\"article_uniapp 原生开发细节.md\":\"1f0effae\",\"article_uniapp真机调试列表不显示手机.md\":\"8e696be7\",\"article_qiankun 微应用实践（续-1）.md\":\"2ce41ff7\",\"article_uniapp 混合开发注意事项.md\":\"3a3ed44f\",\"article_uniapp使用安卓模拟器真机调试.md\":\"b16535a3\",\"engineering_index.md\":\"94e96b75\",\"javascript_index.md\":\"aa65c718\",\"index.md\":\"3445c9d9\",\"vue_reactive原理.md\":\"d958340a\",\"article_vue组件开发规范.md\":\"eca49209\",\"net_index.md\":\"ba8c0037\",\"node_复制操作.md\":\"9eddc4d4\",\"article_不同版本 axios 的 content-type.md\":\"f29fdcab\",\"node_index.md\":\"91a4e7d9\",\"vue_index.md\":\"259b0a38\",\"react_index.md\":\"3261342c\",\"interview_index.md\":\"b87fd9dd\",\"vue_封装一个loading控制器.md\":\"19b31069\",\"node_执行 cmd.md\":\"fc1cb5f7\",\"article_前端读写文件.md\":\"0187a051\",\"vue_computed 的 set 用法.md\":\"f66e4f74\",\"article_qiankun 微应用实践（上）.md\":\"5a4ba0c0\",\"vue_ref原理.md\":\"006339e2\",\"article_qiankun 微应用实践（下）.md\":\"0a30ca2d\",\"javascript_柯里化.md\":\"625112bc\",\"article_vitepress常用语法.md\":\"67339de5\",\"engineering_webpack的cachegroups.md\":\"1d6a7f5b\",\"vue_父子组件生命周期顺序.md\":\"ea9b1339\",\"interview_浏览器.md\":\"e20c4f30\",\"javascript_promise.md\":\"e0424afd\",\"engineering_webpack3升级4.md\":\"19d0ea18\",\"article_问题排查之路.md\":\"d663183f\",\"node_删除操作.md\":\"ddef11ba\",\"engineering_webpack 动态引入的坑.md\":\"9d587510\",\"article_封装一个进度管理组件.md\":\"870757fa\",\"engineering_rollup开发esmodule.md\":\"65034df8\",\"article_单词按a-z排序.md\":\"40e5a040\",\"interview_promise.md\":\"613f982f\",\"node_压缩和解压.md\":\"daac03e4\",\"interview_vue.md\":\"76dce706\",\"interview_工程化.md\":\"deda9421\",\"interview_网络.md\":\"30fcaab5\",\"article_搬砖注意事项.md\":\"a594fa21\",\"interview_css-note.md\":\"d48d4f85\",\"article_vitepress emoji.md\":\"1d769177\",\"interview_javascript.md\":\"47fbffd4\"}")</script>
    <script type="module" async src="/assets/app.db63b7d7.js"></script>
    
  </body>
</html>